<template>
	<view class="bor">
		<view class="menu_item">
			<view class="left">
				<text>头像</text>
			</view>
			<view class="right">
				<image class="headUrl" :src="user.HeadImgUrl" mode="aspectFill" @click="uploadImage"></image>
				<!-- <image class="arr" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/arr_right_gray.png" mode="">
				</image> -->
			</view>
		</view>
		<view class="menu_item ">
			<view class="left">
				<text>用户名</text>
			</view>
			<view class="right">
				<input placeholder="请输入用户名~" v-model="user.Name" type="text" />
				<!-- <image class="arr" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/arr_right_gray.png" mode="">
				</image> -->
			</view>
		</view>
		<view class="menu_item " @click="showPicker=true">
			<view class="left">
				<text>性别</text>
			</view>
			<view class="right">
				<text>{{user.Sex||'未知'}}</text>
				<!-- <image class="arr" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/arr_right_gray.png" mode="">
				</image> -->
			</view>
		</view>
		<view class="menu_item ">
			<view class="left">
				<text>联系电话</text>
			</view>
			<view class="right">
				<input placeholder="请输入联系电话" v-model="user.Phone" type="number" maxlength="11"/>
				<!-- <image class="arr" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/arr_right_gray.png" mode="">
				</image> -->
			</view>
		</view>
		<!-- 	<view class="menu_item ">
			<view class="left">
				<text>个人描述</text>
			</view>
			<view class="right">
				<textarea name="" id="" cols="30" rows="5" v-model="user.Descript" placeholder="快来添加你的个人描述~"
					style="width: 330rpx; height: 150rpx;"></textarea>
			</view>
		</view> -->

		<button class="submit" @click="save">保存</button>
		<u-picker :show="showPicker" :columns="columns" @confirm="confirm" @cancel="showPicker=false"></u-picker>
		<u-popup :show="showpoup" mode="center" :safeAreaInsetBottom="false" :round="10" @close="showpoup=false">
			<view class="login-container">
				<view style="text-align: center; margin-bottom: 30rpx; font-size: 36rpx;color: #333333;">
					修改用户名
				</view>
				<view class="login-box">
					<view class="input-group">
						<text class="label">用户名</text>
						<input class="input" v-model="userName" placeholder="请输入用户名" />
					</view>
					<view class="button" @click="submit">确定</view>
					<view class="button cancel" @click="showpoup=false">取消</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				showpoup: false,
				userName: '',
				showPicker: false,
				columns: [
					['男', '女', '未知']
				],
				imgArr: []

			};
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			async uploading(url, tempKey) {
				console.log('url ----------' + url);

				const r = await this.$upload(url, (pro) => {});

				this.user.HeadImgUrl = r
				console.log('upload file ' + r);
				// this.formdata.PhotoUrl.push(r);
				// this.formdata.PhotoUrl = r
			},
			uploadImage() {
				let _this = this;
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					maxDuration: 30,
					camera: 'back',
					success(res) {
						console.log(res);
						res.tempFiles.forEach(async (item) => {
							let o = {
								duration: 0,
								fileType: item.fileType,
								tempUrl: item.tempFilePath,
								flieUrl: item.tempFilePath,
								tempKey: uni.$u.guid(8),
								pro: 0,
							};

							_this.imgArr.push(o);

							let rex = await _this.uploading(o.flieUrl, o.tempKey);
							console.log('rex-------', rex);
						});
					},
				});
			},
			async save() {
				const {
					Name,
					HeadImgUrl,
					Phone,
					// Descript,
					Sex
				} = this.user
				if (!Name) {
					uni.showToast({
						title: `用户名不能为空`,
						icon: 'none'
					})
					return
				}
				const phoneRegex = /^[0-9]{10,15}$/; // 可以根据需要调整正则表达式
				if (!phoneRegex.test(Phone)) {
					uni.showToast({
						title: `请输入正确的手机号`,
						icon: 'none'
					})
					return
				}
				let res = await this.$api.post('User/Update', {
					Name,
					HeadImgUrl,
					Phone,
					// Descript,
					Sex
				})
				if (res.data) {
					uni.showToast({
						title: `修改成功`,
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}
			},
			confirm(e) {
				console.log(e);
				this.user.Sex = e.value[0]
				this.showPicker = false
			},
			submit() {
				this.user.Name = this.userName
				this.showpoup = false

			},
		async getUserInfo() {
		    try {
		        const { data } = await this.$api.post('User/GetUserInfo', {
		            ID: uni.getStorageSync('user').UserID
		        });
		        
		        this.user = data;
		        this.user.Phone = this.user.Phone ? Number(this.user.Phone) : '';
		        
		        console.log(this.user.Phone);
		        console.log(this.user);
		        this.userName = this.user.Name;
		    } catch (error) {
		        console.error('获取用户信息失败:', error);
		        // 可以在这里处理错误，例如设置一个错误提示
		    }
		},

		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	input {
		text-align: right;
	}

	.submit {
		width: 90%;
		margin: 0 auto;
		height: 100rpx;
		border-radius: 20rpx;
		background-color: #3572FE;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		position: fixed;
		left: 50%;
		bottom: 0;
		transform: translate(-50%, -50%);
	}

	.login-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 548rpx;
		height: 500rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
	}

	// 登录框
	.login-box {
		width: 90%;
		max-width: 600rpx;
		border-radius: 10rpx;
		// box-shadow: 0rpx 4rpx 10rpx rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	// 标签
	.label {
		width: 100%;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
		text-align: left;
	}

	// 输入框容器
	.input-group {
		width: 100%;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
	}

	// 输入框
	.input {
		width: 100%;
		height: 60rpx;
		border: 1rpx solid #ddd;
		border-radius: 5rpx;
		font-size: 28rpx;
		color: #333;
	}

	// 按钮
	.button {
		width: 468rpx;
		height: 80rpx;
		background: #3572FE;
		border-radius: 8rpx;
		border: none;
		color: #ffffff;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		margin-top: 20rpx;
	}

	.cancel {
		background-color: white;
		margin-top: 30rpx;
		font-size: 28rpx;
		color: #999999;
	}

	.bor {
		width: 95%;
		margin: 0 auto;
		padding: 40rpx 20rpx;
		margin-top: 40rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.headUrl {
		width: 75rpx;
		height: 75rpx;
		border-radius: 999%;
	}

	.menu {
		box-sizing: border-box;
		padding: 0 32rpx;
		margin-top: 48rpx;
	}


	.menu_item {
		.icon {
			width: 48rpx;
			height: 48rpx;
			margin-right: 24rpx;
		}

		.arr {
			width: 32rpx;
			height: 32rpx;
			margin-left: 40rpx;
		}

		.arr2 {
			width: 16rpx;
			height: 16rpx;
		}

		// height: 112rpx;
		display: flex;
		// align-items: center;
		box-sizing: border-box;
		padding: 32rpx;
		background-color: #fff;
		justify-content: space-between;
		width: 100%;
		border-radius: 16rpx;
		border-bottom: 1rpx solid #f1f1f1;

		.left {
			display: flex;
			align-items: center;
			flex: 1;

			text {
				font-size: 28rpx;
				color: #666666;
			}
		}

		.right {
			display: flex;
			align-items: center;
			justify-content: space-between;

			text {
				font-size: 28rpx;
			}
		}


	}
</style>